<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgArr" :key="index">
        <img :src="item" alt="" srcset="" />
      </van-swipe-item>
    </van-swipe>
    <h2>{{ query.proname }}</h2>
    <p>商品价格：{{ query.originprice }}元</p>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <router-link to="/cart">
        <van-action-bar-icon
          icon="cart-o"
          text="购物车"
          :badge="cart.allInfo.allNum"
        />
      </router-link>
      <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="handleAddCart"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { IProType } from "../api/home";
import { useCart, ICartType } from "../store/cart";
import { useUserStore } from "../store/userStore";
const onClickLeft = () => history.back();
const route = useRoute();
const { query } = route;
const imgArr = computed<Array<string>>(() => {
  let arr = [];
  for (let attr in query) {
    if (attr.indexOf("img") != -1) {
      arr.push(query[attr] as string);
    }
  }
  return arr;
});

//加入购物车
const cart = useCart();
const user = useUserStore();
const router = useRouter();
const handleAddCart = () => {
  if (user.userInfo) {
    let cartPro = {
      ...query,
      num: 1,
      ischeck: true,
      userid: user.userInfo.objectId, //携带用户id
    } as ICartType;
    cart.cartAddAct(cartPro);
  } else {
    router.push("/login");
  }
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
</style>
